import React, {Component} from 'react';
import {ScrollView, StyleSheet, Alert} from 'react-native';
import {Colors, View, Badge, Text, Image} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';

const star = require('../../assets/icons/star.png');
const bell = require('../../assets/icons/bell.png');

export default class BadgesDetailedScreen extends Component {
  
  renderCustomView = (
    <View row centerV style={{backgroundColor: Colors.grey80, paddingHorizontal: 4, borderRadius: 4}}>
      <View style={{width: 6, height: 6, borderRadius: 3, backgroundColor: 'red', marginRight: 4}} />
      <Text text100 grey10>Online</Text>
    </View>
  );

  render() {
    return (
      <TestSuite name="Badge_Detailed_Props">
        <ScrollView contentContainerStyle={styles.container}>
          <TestCase itShould="[label] 不同长度的文本内容">
            <View row spread centerV>
              <View center>
                <Badge label="1" backgroundColor={Colors.blue30} />
                <Text text100 marginT-5>Single Char</Text>
              </View>
              <View center>
                <Badge label="New" backgroundColor={Colors.blue30} />
                <Text text100 marginT-5>Word</Text>
              </View>
              <View center>
                <Badge label="Discount" backgroundColor={Colors.blue30} />
                <Text text100 marginT-5>Long Word</Text>
              </View>
            </View>
          </TestCase>

          <TestCase itShould="[labelFormatterLimit] 文本格式化限制 (1, 2, 3, 4)">
            <View row spread centerV>
              <View center>
                <Badge label="999" labelFormatterLimit={1} backgroundColor={Colors.red30} />
                <Text text100 marginT-5>Limit=1</Text>
              </View>
              <View center>
                <Badge label="999" labelFormatterLimit={2} backgroundColor={Colors.red30} />
                <Text text100 marginT-5>Limit=2</Text>
              </View>
              <View center>
                <Badge label="999" labelFormatterLimit={3} backgroundColor={Colors.red30} />
                <Text text100 marginT-5>Limit=3</Text>
              </View>
              <View center>
                <Badge label="1000" labelFormatterLimit={4} backgroundColor={Colors.red30} />
                <Text text100 marginT-5>Limit=4</Text>
              </View>
            </View>
          </TestCase>

          <TestCase itShould="[size] 斑点模式 (无Label) 的不同尺寸">
            <View row spread centerV>
              <View center>
                <Badge size={6} backgroundColor={Colors.green30} />
                <Text text100 marginT-5>size={'{6}'}</Text>
              </View>
              <View center>
                <Badge size={10} backgroundColor={Colors.green30} />
                <Text text100 marginT-5>size={'{10}'}</Text>
              </View>
              <View center>
                <Badge size={16} backgroundColor={Colors.green30} />
                <Text text100 marginT-5>size={'{16}'}</Text>
              </View>
              <View center>
                <Badge size={24} backgroundColor={Colors.green30} />
                <Text text100 marginT-5>size={'{24}'}</Text>
              </View>
            </View>
          </TestCase>

          <TestCase itShould="[size] 带 Label 时的固定尺寸 (强制大小)">
            <View row spread centerV>
              <View center>
                <Badge label="1" size={16} backgroundColor={Colors.violet30} />
                <Text text100 marginT-5>Small (16)</Text>
              </View>
              <View center>
                <Badge label="1" size={24} backgroundColor={Colors.violet30} />
                <Text text100 marginT-5>Medium (24)</Text>
              </View>
              <View center>
                <Badge label="1" size={40} backgroundColor={Colors.violet30} />
                <Text text100 marginT-5>Large (40)</Text>
              </View>
            </View>
          </TestCase>

          <TestCase itShould="[borderRadius] 自定义圆角半径">
            <View row spread centerV>
              <View center>
                <Badge label="Default" backgroundColor={Colors.orange30} />
                <Text text100 marginT-5>Default</Text>
              </View>
              <View center>
                <Badge label="Radius=2" borderRadius={2} backgroundColor={Colors.orange30} />
                <Text text100 marginT-5>R=2</Text>
              </View>
              <View center>
                <Badge label="Radius=8" borderRadius={8} backgroundColor={Colors.orange30} />
                <Text text100 marginT-5>R=8</Text>
              </View>
            </View>
          </TestCase>

          <TestCase itShould="[backgroundColor] 不同的背景颜色">
            <View row spread centerV>
              <Badge label="Red" backgroundColor={Colors.red30} />
              <Badge label="Blue" backgroundColor={Colors.blue30} />
              <Badge label="Green" backgroundColor={Colors.green30} />
              <Badge label="Dark" backgroundColor={Colors.grey20} />
            </View>
          </TestCase>

          <TestCase itShould="[borderWidth & borderColor] 边框设置">
            <View row spread centerV>
              <View center>
                <Badge 
                  size={20} 
                  backgroundColor={Colors.grey70} 
                  borderWidth={1} 
                  borderColor={Colors.red30} 
                />
                <Text text100 marginT-5>W=1, Red</Text>
              </View>
              <View center>
                <Badge 
                  size={20} 
                  backgroundColor={Colors.grey70} 
                  borderWidth={3} 
                  borderColor={Colors.blue30} 
                />
                <Text text100 marginT-5>W=3, Blue</Text>
              </View>
              <View center>
                <Badge 
                  label="Text" 
                  backgroundColor={Colors.white} 
                  borderWidth={1} 
                  borderColor={Colors.black} 
                />
                <Text text100 marginT-5>With Label</Text>
              </View>
            </View>
          </TestCase>

          <TestCase itShould="[labelStyle] 自定义文字样式 (颜色, 字重, 字号)">
            <View row spread centerV>
              <View center>
                <Badge label="Color" backgroundColor={Colors.grey30} labelStyle={{color: 'yellow'}} />
                <Text text100 marginT-5>Yellow Text</Text>
              </View>
              <View center>
                <Badge label="Bold" backgroundColor={Colors.grey30} labelStyle={{fontWeight: '900'}} />
                <Text text100 marginT-5>Bold 900</Text>
              </View>
              <View center>
                <Badge label="Size" size={30} backgroundColor={Colors.grey30} labelStyle={{fontSize: 18}} />
                <Text text100 marginT-5>Font 18</Text>
              </View>
            </View>
          </TestCase>

          <TestCase itShould="[icon] 仅图标模式 vs 图标+文字模式">
            <View row spread centerV>
              <View center>
                <Badge icon={star} backgroundColor={Colors.yellow30} iconStyle={{tintColor: Colors.black}} />
                <Text text100 marginT-5>Icon Only</Text>
              </View>
              <View center>
                <Badge 
                  label="Star" 
                  icon={star} 
                  backgroundColor={Colors.yellow30} 
                  iconStyle={{tintColor: Colors.black, width: 10, height: 10, marginRight: 4}} 
                />
                <Text text100 marginT-5>Icon + Label</Text>
              </View>
            </View>
          </TestCase>

          <TestCase itShould="[iconStyle] 图标着色 (TintColor) 与 大小">
            <View row spread centerV>
              <View center>
                <Badge icon={bell} backgroundColor={Colors.grey60} iconStyle={{tintColor: Colors.red30}} />
                <Text text100 marginT-5>Tint Red</Text>
              </View>
              <View center>
                <Badge icon={bell} backgroundColor={Colors.grey60} iconStyle={{tintColor: Colors.white}} />
                <Text text100 marginT-5>Tint White</Text>
              </View>
              <View center>
                <Badge size={30} icon={bell} backgroundColor={Colors.grey60} iconStyle={{width: 20, height: 20, tintColor: 'white'}} />
                <Text text100 marginT-5>Big Icon</Text>
              </View>
            </View>
          </TestCase>

、
           <TestCase itShould="[iconProps] 透传Image属性 (透明度/颜色)">
            <View row spread centerV>
               <View center>
                <Badge 
                  icon={star} 
                  backgroundColor={Colors.blue10} 
                />
                <Text text100 marginT-5>Default</Text>
               </View>
               <View center>
                <Badge 
                  icon={star} 
                  backgroundColor={Colors.blue10} 
                  iconProps={{opacity: 0.6}}
                />
                <Text text100 marginT-5>Opacity 0.6</Text>
               </View>
               <View center>
                <Badge 
                  icon={star} 
                  backgroundColor={Colors.blue10} 
                  iconProps={{tintColor: Colors.red30}}
                />
                <Text text100 marginT-5>Tint Red</Text>
               </View>
            </View>
          </TestCase>

          <TestCase itShould="[customElement] 完全自定义内部 JSX">
            <View row spread centerV>
              <View center>
                <Badge customElement={this.renderCustomView} />
                <Text text100 marginT-5>Custom View</Text>
              </View>
              <View center>
                <Badge 
                  customElement={<Image source={bell} tintColor="white" width={15} height={15}/>} 
                  backgroundColor={Colors.green30} 
                  size={30}
                  borderRadius={10}
                />
                <Text text100 marginT-5>Image Element</Text>
              </View>
            </View>
          </TestCase>

          <TestCase itShould="[containerStyle] 外部容器样式 (虚线边框/旋转/阴影)">
            <View row spread centerV style={{height: 60}}>
               <View center>
                 <Badge 
                   label="1" 
                   containerStyle={{
                     borderWidth: 2,
                     borderColor: Colors.green30,
                     borderStyle: 'dashed'
                   }}
                 />
                 <Text text90 marginT-5>Dashed</Text>
               </View>

               <View center>
                 <Badge 
                   label="2"
                   containerStyle={{
                     transform: [{rotate: '45deg'}]
                   }}
                   backgroundColor={Colors.orange30}
                 />
                 <Text text90 marginT-5>Rot 45°</Text>
               </View>

               <View center>
                 <Badge 
                   label="3" 
                   backgroundColor={Colors.cyan30}
                   containerStyle={{
                     shadowColor: "#000",
                     shadowOffset: { width: 0, height: 2 },
                     shadowOpacity: 0.5,
                     shadowRadius: 3,
                     elevation: 5,
                   }}
                 />
                 <Text text90 marginT-5>Shadow</Text>
               </View>
            </View>
          </TestCase>

          <TestCase itShould="[onPress] 点击事件响应">
            <View center>
              <Badge 
                label="Click Me" 
                size={40}
                backgroundColor={Colors.blue30}
                onPress={() => Alert.alert('Badge Pressed')}
              />
              <Text text100 marginT-5>Try Clicking</Text>
            </View>
          </TestCase>

           <TestCase itShould="[hitSlop] 扩大点击热区 (不可见，但点击周围可触发)">
            <View center>
              <Badge 
                label="Tiny Target" 
                size={20}
                backgroundColor={Colors.purple30}
                onPress={() => Alert.alert('HitSlop Works!')}
                hitSlop={{top: 20, bottom: 100, left: 100, right: 100}}
              />
              <Text text100 marginT-5>HitSlop</Text>
            </View>
          </TestCase>

        </ScrollView>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    paddingBottom: 60,
  },
});